<template>
<div class="drag-list">
    <div class="group">
        <!-- :sort='false' 阻止内部列表拖拽，可以向外拖拽 -->
        <draggable
            class="list-group"
            :list="list1"
            itemKey="key"
            tag="ul"
            :sort='false'
            :group="dragOptionsA"
            ghost-class="ghost"
            chosen-class="chosenClass"
            animation="300"
            @end="handleMoveEnd"
            @start="handleMoveStart"
            :move="handleMove"
        >
            <template #item="{ element, index }">
                <li :class="['list-group-item', { 'color': element.color }]" :key="element.key">
                    {{ element.name }}{{ index }}
                </li>
            </template>
        </draggable>
        <pre>
            {{ JSON.stringify(list1, null, 2) }}
        </pre>
    </div>
    <div class="group">
        <draggable
            class="list-group custom-ul"
            :list="list2"
            itemKey="key"
            tag="ul"
            :group="dragOptionsB"
            ghost-class="ghost"
            chosen-class="chosenClass"
            animation="300"
            @change="onChange"
            @start="onStart" 
            @end="onEnd"
        >
            <template #item="{ element, index }">
                <li class="list-group-item color" :key="element.key">
                    {{ element.name }}_{{ index }}
                </li>
            </template>
        </draggable>
        <pre>
            {{ JSON.stringify(list2, null, 2) }}
        </pre>
    </div>      
</div>
</template>

<script lang="js" setup>
import { v4 as uuidV4 } from 'uuid';
import draggable from 'vuedraggable';

const dragOptionsA = reactive({
    name: "dragA", // 分组名称
    put: false, // true 允许拖入， false不允许拖入
    pull: () => {
        // 允许拖出true,如果设置字符串'clone'表示该组拖出的元素会被克隆
        return 'clone';
    },
})
const dragOptionsB = reactive({
    name: "dragB", // 分组名称
    put: true, // 允许拖入
    pull: () => {
        // let res = this.modules.arr1.length > 3;
        // //当A组元素小于等于3个时，不允许再拖出元素了
        // this.message = res ? "只能拖出1个" : "不能再拖了";
        return true;
    },
})

const list1 = reactive([
      {name: "JavaScript", nodeId: "name1", key: uuidV4()},
      {name: "react", nodeId: "name2", key: uuidV4()},
      {name: "CSS", nodeId: "name3", key: uuidV4()},
      {name: "vue", nodeId: "name4", key: uuidV4()},
      {name: "vite", nodeId: "name5", key: uuidV4()},
      {name: "scss", nodeId: "name6", key: uuidV4()}
  ]);
const list2 = reactive([
    //   {name: "洗衣机", color: 'color', nodeId: "name1", key: '1'},
    //   {name: "冰箱开关", color: 'color', nodeId: "name2", key: '2'},
    //   {name: "沙发科技布", color: 'color', nodeId: "name3", key: '3'},
    //   {name: "tpc高清晰电视", color: 'color', nodeId: "name4", key: '4'},
    //   {name: "月光灰推拉门", color: 'color', nodeId: "name5", key: '5'},
    //   {name: "测试乳胶漆", color: 'color', nodeId: "name6", key: '6'}
  ]);

const handleMoveEnd = (evt) => {}

const handleMoveStart = ({ oldIndex }) => {}

// 是否取消拖动参数
const handleMove = (evt) => {
    return true
}
//拖拽开始的事件
const onStart = () => {
    console.log("开始拖拽");
}

//拖拽结束的事件
const onEnd = () => {
    console.log("结束拖拽");
}
// 拖拽事件
const onChange = (evt) => {
    console.log(evt);
}
</script>

<style lang="scss" scoped>
.drag-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 25px;
}
.ghost {
    opacity: 0.5;
    background: #10ac84 !important;
    border: solid 1px rgb(19, 41, 239) !important;
}
.list-group {
    min-height: 20px;
    border: 1px solid tomato;
    padding: 20px;
    &.custom-ul {
        min-height: 300px;
    }
}

.list-group-item {
    cursor: grab;
    border: 1px solid #eee;
    padding: 5px 20px;
    margin-bottom: 10px;
    border-radius: 12px;
    &.color {
        color: #10ac84;
        font-size: 14px;
    }
    &:hover {
        background: rgba($color: #000000, $alpha: 0.1);
    }
}
.chosenClass {
    background-color: #c8ebfb !important;
    border: 1px solid #c8ebfb;
}
</style>
